import React, {Component} from 'react';
import {Route, Link} from 'react-router-dom';
import connectRoute from '../../utils/connectRoute';
import LazyLoad from 'react-lazyload';
import asyncComponent from '../../utils/AsyncComponent';
import Detail from '../../containers/detail';
import Head   from '../../components/head';
import Foot   from '../../components/foot';
import ReactSwipe from 'react-swipe';
import './style.scss'
import {banners} from '../../utils/config';
import datalist from '../../utils/localData';
import ImgList from '../../components/imgList';
import {ScrollTop,offsetTop} from "../../utils/DomApi";
const HDetail = connectRoute(Detail);
export default class extends Component {
    constructor(a) {
        super(a);
        this.state = {
            activeIndex: 0,
            datalist: datalist,
            navFiexd:false
        };
        this.navRefFn = element => {
            this.navRef = element;
        };
    }
    clickItem(id){
        this.props.history.push("/home/main/detail/"+id);
    }
    componentDidMount() {
        const top=offsetTop(this.navRef);
        console.log(top);
        this.scrollFn=()=> {
            let doc=  document.getElementsByTagName('body')[0];
            if(top-ScrollTop()<0){
                console.log(1)
                this.setState(()=>{
                    return {
                        navFiexd: true
                    }
                });
            }else{
                this.setState(()=>{
                    return {
                        navFiexd: false
                    }
                });
            }
        }
        window.addEventListener('scroll',this.scrollFn);
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',this.scrollFn);
    }

    render() {
        const swipeOptions = {
            continuous: true,
            auto: 5000,
            callback: (i) => {
                this.setState({
                    activeIndex: i
                })
            }
        };
        const {match} = this.props;
        const {datalist,navFiexd} = this.state;
        return (<div  className={navFiexd?'main mainPaddingTop':'main'}>
            <Head></Head>
            <div className={'carousel-parent'}>
                <div className='carousel-container'>
                    <ReactSwipe className='carousel'
                                swipeOptions={swipeOptions}
                    >
                        {banners.map((i, index) => {
                            return <div key={index}><img src={i} alt=""/></div>
                        })}
                    </ReactSwipe>
                    <div className='carousel-nav'>
                        <ul>
                            {banners.map((i, index) => {
                                return <li
                                    className={index === (this.state.activeIndex % banners.length) ? 'active' : ''}
                                    key={index}></li>
                            })}
                        </ul>
                    </div>
                </div>
            </div>
            <div ref={this.navRefFn} className={navFiexd?'nav fixedNav':'nav'}>
                <ul>
                    <Link to={'/home/brand/1'}>
                        <div>
                            <i style={{backgroundImage:'url('+require('../../img/nav1.jpg')+')'}}></i>
                        </div>

                        <p>品牌</p>
                    </Link>
                    <Link to={'/home/assortment'}>
                        <div>
                            <i style={{backgroundImage:'url('+require('../../img/nav2.jpg')+')'}}></i>
                        </div>

                        <p>分类</p>
                    </Link>
                    <Link to={'/home/fullView'}>
                        <div>
                            <i  style={{backgroundImage:'url('+require('../../img/nav3.jpg')+')'}}></i>
                        </div>

                        <p>全景</p>
                    </Link>
                    <a href="tel:13930580128">
                        <div>
                            <i  style={{backgroundImage:'url('+require('../../img/nav4.jpg')+')'}}></i>
                        </div>
                        <p>联系我们</p>
                    </a>
                </ul>
            </div>
            <div className={'hot_wrap'}>
                <h6>热销</h6>
                <ImgList clickItem={this.clickItem.bind(this)} imgList={datalist[0].contentList[0].contentList}></ImgList>
            </div>
            <Foot></Foot>
            <Route path={'/home/main/detail/:id'} component={HDetail}/>

        </div>)
    }
}